<template>
    <div>
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                   <div class="header_box_main">
                    创建团购
                   </div>  
                </template>
            </HeaderView>
        </div>
        <van-cell title="选择日期区间" :value="date" @click="show = true" />
        <van-calendar v-model="show" type="range" @confirm="onConfirm" />
    </div>
</template>
<script>
import HeaderView from '@/components/header1View.vue';
    export default {
        data() {
            return {
            date: '',
            show: false,
            };
        },
        methods: {
            formatDate(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`;
            },
            onConfirm(date) {
            const [start, end] = date;
            this.show = false;
            this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
            },
        },
        components:{
            HeaderView
        }
    };
</script>
<style>
.header_box_main{
        background: #ff6e53;
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
</style>